import React, { Component } from 'react'
import { View, Text, Image } from 'react-native'
import TabNavigator from 'react-native-tab-navigator'
import { styles, Img } from './index_style'
import * as Device from 'expo-device';
import { inject, observer } from 'mobx-react'
import { Provider } from '@/src/context/navigation'


import Cookbook from '@/src/pages/index/cookbook/Cookbook'
import Map from '@/src/pages/index/map/Map'
import More from '@/src/pages/index/more/More'

import cookbook from '@/assets/images/cookbook.png'
import cookbookActive from '@/assets/images/cookbook-active.png'

import menu from '@/assets/images/menu.png'
import menuActive from '@/assets/images/menu-active.png'


import location from '@/assets/images/location.png'
import locationActive from '../../../assets/images/location-active.png'

import more from '@/assets/images/more.png'
import moreActive from '@/assets/images/more-active.png'

interface Props {
  store?: any
}
interface State {
  selectedTab: string
}

@inject('store')
@observer
class Index extends Component<Props, State> {
  state = {
    selectedTab: 'cookbook'
  }



  componentDidMount() {
    // console.log('this.props:', this.props)
  }

  render() {
    console.log(Device.deviceName)
    return (
      <TabNavigator
        tabBarStyle={
          Device.deviceName === 'iPhone Xʀ' ? styles.tabBarStyle : undefined
        }
      >
        <TabNavigator.Item
          selected={this.state.selectedTab === 'cookbook'}
          title="菜谱大全"
          renderIcon={() => <Img source={cookbook} />}
          renderSelectedIcon={() => <Img source={cookbookActive} />}
          onPress={() => this.setState({ selectedTab: 'cookbook' })}>
          {
            <Provider value={{ ...this.props }}>
              <Cookbook></Cookbook>
            </Provider>
          }
        </TabNavigator.Item>

        <TabNavigator.Item
          selected={this.state.selectedTab === 'menu'}
          title="分类"
          renderIcon={() => <Img source={menu} />}
          renderSelectedIcon={() => <Img source={menuActive} />}
          onPress={() => this.setState({ selectedTab: 'menu' })}>
          {
            <Text>menu</Text>
          }
        </TabNavigator.Item>

        {
          this.props.store.isShow ?
            <TabNavigator.Item
              selected={this.state.selectedTab === 'map'}
              title="地图"
              renderIcon={() => <Img source={location} />}
              renderSelectedIcon={() => <Img source={locationActive} />}
              onPress={() => this.setState({ selectedTab: 'map' })}>
              {
                <Map></Map>
              }
            </TabNavigator.Item> : null
        }

        <TabNavigator.Item
          selected={this.state.selectedTab === 'more'}
          title="更多"
          renderIcon={() => <Img source={more} />}
          renderSelectedIcon={() => <Img source={moreActive} />}
          onPress={() => this.setState({ selectedTab: 'more' })}>
          {
            <More></More>
          }
        </TabNavigator.Item>



      </TabNavigator>

    )
  }
}

export default Index;